<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      class Animal {
        static planet = 'Earth'

        constructor(name, speed) {
          this.speed = speed
          this.name = name
        }

        run(speed = 0) {
          this.speed += speed
          alert(`${this.name} runs with speed ${this.speed}.`)
        }

        static compare(animalA, animalB) {
          return animalA.speed - animalB.speed
        }
      }

      // 继承于 Animal
      class Rabbit extends Animal {
        hide() {
          alert(`${this.name} hides!`)
        }
      }

      let rabbits = [
        new Rabbit('White Rabbit', 10),
        new Rabbit('Black Rabbit', 5),
      ]

      rabbits.sort(Rabbit.compare)

      rabbits[0].run() // Black Rabbit runs with speed 5.

      alert(Rabbit.planet) // Earth
    </script>
  </body>
</html>
